<template>
  <a-layout style="min-height: 100vh; background: #f5f7fa;">
    <!-- 顶部导航 -->
    <nav-bar />

    <a-layout-content style="padding: 40px 50px; max-width: 1400px; margin: 0 auto; width: 100%;">
      <!-- 欢迎标题 -->
      <div style="text-align: center; margin-bottom: 40px;">
        <h1 style="font-size: 36px; color: #2c3e50; font-weight: 600; margin-bottom: 12px;">
          {{ $t('home.title') }}
        </h1>
        <p style="font-size: 16px; color: #606266;">{{ $t('home.subtitle') }}</p>
      </div>

      <!-- 快速搜索 -->
      <div style="max-width: 800px; margin: 0 auto 50px;">
        <a-card style="border-radius: 12px; border: 1px solid #e4e7ed;">
          <div style="text-align: center; margin-bottom: 16px;">
            <h3 style="font-size: 20px; color: #2c3e50; margin: 0;">{{ $t('home.quickSearch') }}</h3>
          </div>
          <a-input-search
            v-model:value="quickSearch"
            :placeholder="$t('home.searchPlaceholder')"
            size="large"
            :enter-button="$t('home.searchButton')"
            @search="goToSearch"
            style="max-width: 600px; display: block; margin: 0 auto;"
          >
            <template #prefix>
              <search-outlined />
            </template>
          </a-input-search>
        </a-card>
      </div>

      <!-- 统计卡片 -->
      <a-row :gutter="[16, 16]" style="margin-bottom: 50px;">
        <a-col :xs="24" :sm="12" :md="8">
          <a-card 
            :loading="statsLoading"
            :body-style="{ padding: '24px' }"
            style="border-radius: 8px; border: 1px solid #e4e7ed;"
          >
            <a-statistic
              :title="$t('home.stats.proteins')"
              :value="stats.protein_count"
              :value-style="{ color: '#2c3e50', fontSize: '28px', fontWeight: '600' }"
            >
              <template #prefix>
                <div style="font-size: 36px; opacity: 0.3; color: #909399;">🧬</div>
              </template>
            </a-statistic>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="8">
          <a-card 
            :loading="statsLoading"
            :body-style="{ padding: '24px' }"
            style="border-radius: 8px; border: 1px solid #e4e7ed;"
          >
            <a-statistic
              :title="$t('home.stats.species')"
              :value="stats.species_count"
              :value-style="{ color: '#2c3e50', fontSize: '28px', fontWeight: '600' }"
            >
              <template #prefix>
                <div style="font-size: 36px; opacity: 0.3; color: #909399;">🦠</div>
              </template>
            </a-statistic>
          </a-card>
        </a-col>

        <a-col :xs="24" :sm="12" :md="8">
          <a-card 
            :loading="statsLoading"
            :body-style="{ padding: '24px' }"
            style="border-radius: 8px; border: 1px solid #e4e7ed;"
          >
            <a-statistic
              :title="$t('home.stats.structures')"
              :value="stats.pdb_file_count"
              :value-style="{ color: '#2c3e50', fontSize: '28px', fontWeight: '600' }"
            >
              <template #prefix>
                <div style="font-size: 36px; opacity: 0.3; color: #909399;">⚛️</div>
              </template>
            </a-statistic>
          </a-card>
        </a-col>
      </a-row>

      <!-- 关于数据库 -->
      <a-card style="margin-bottom: 50px; border-radius: 12px; border: 1px solid #e4e7ed;">
        <a-row :gutter="[32, 32]" align="middle">
          <!-- 左侧图片 -->
          <a-col :xs="24" :md="10">
            <div style="text-align: center;">
              <img 
                src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='300' viewBox='0 0 400 300'%3E%3Crect fill='%23f0f2f5' width='400' height='300'/%3E%3Ccircle cx='200' cy='150' r='80' fill='%23409eff' opacity='0.2'/%3E%3Ccircle cx='200' cy='150' r='60' fill='%23409eff' opacity='0.3'/%3E%3Ccircle cx='200' cy='150' r='40' fill='%23409eff' opacity='0.4'/%3E%3Ctext x='200' y='160' font-family='Arial' font-size='48' fill='%23409eff' text-anchor='middle'%3E%3C/text%3E%3C/svg%3E" 
                alt="Database"
                style="max-width: 100%; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
              />
            </div>
          </a-col>

          <!-- 右侧介绍 -->
          <a-col :xs="24" :md="14">
            <h2 style="font-size: 28px; color: #2c3e50; margin-bottom: 16px;">{{ $t('home.about.title') }}</h2>
            <p style="font-size: 16px; color: #606266; line-height: 1.8; margin-bottom: 24px;">
              {{ $t('home.about.description') }}
            </p>

            <!-- 特性列表 -->
            <h3 style="font-size: 20px; color: #2c3e50; margin-bottom: 16px;">{{ $t('home.about.features.title') }}</h3>
            <a-row :gutter="[16, 16]">
              <a-col :xs="24" :sm="12">
                <div style="display: flex; gap: 12px;">
                  <div style="flex-shrink: 0;">
                    <div style="width: 40px; height: 40px; background: #ecf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
                      
                    </div>
                  </div>
                  <div>
                    <div style="font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ $t('home.about.features.feature1') }}</div>
                    <div style="font-size: 14px; color: #909399;">{{ $t('home.about.features.feature1Desc') }}</div>
                  </div>
                </div>
              </a-col>

              <a-col :xs="24" :sm="12">
                <div style="display: flex; gap: 12px;">
                  <div style="flex-shrink: 0;">
                    <div style="width: 40px; height: 40px; background: #ecf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
                      
                    </div>
                  </div>
                  <div>
                    <div style="font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ $t('home.about.features.feature2') }}</div>
                    <div style="font-size: 14px; color: #909399;">{{ $t('home.about.features.feature2Desc') }}</div>
                  </div>
                </div>
              </a-col>

              <a-col :xs="24" :sm="12">
                <div style="display: flex; gap: 12px;">
                  <div style="flex-shrink: 0;">
                    <div style="width: 40px; height: 40px; background: #ecf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
                      
                    </div>
                  </div>
                  <div>
                    <div style="font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ $t('home.about.features.feature3') }}</div>
                    <div style="font-size: 14px; color: #909399;">{{ $t('home.about.features.feature3Desc') }}</div>
                  </div>
                </div>
              </a-col>

              <a-col :xs="24" :sm="12">
                <div style="display: flex; gap: 12px;">
                  <div style="flex-shrink: 0;">
                    <div style="width: 40px; height: 40px; background: #ecf5ff; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 20px;">
                      
                    </div>
                  </div>
                  <div>
                    <div style="font-weight: 600; color: #2c3e50; margin-bottom: 4px;">{{ $t('home.about.features.feature4') }}</div>
                    <div style="font-size: 14px; color: #909399;">{{ $t('home.about.features.feature4Desc') }}</div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-col>
        </a-row>
      </a-card>

      <!-- 团队介绍 -->
      <a-card style="margin-bottom: 50px; border-radius: 12px; border: 1px solid #e4e7ed;">
        <h2 style="font-size: 28px; color: #2c3e50; margin-bottom: 16px; text-align: center;">{{ $t('home.team.title') }}</h2>
        <p style="font-size: 16px; color: #606266; line-height: 1.8; text-align: center; max-width: 800px; margin: 0 auto 40px;">
          {{ $t('home.team.description') }}
        </p>

        <a-row :gutter="[24, 24]">
          <a-col :xs="24" :sm="12" :md="8">
            <a-card :body-style="{ padding: '24px', textAlign: 'center' }" style="border-radius: 8px; border: 1px solid #e4e7ed;">
              <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white;">
                
              </div>
              <h3 style="font-size: 18px; color: #2c3e50; margin-bottom: 8px;">{{ $t('home.team.member1.name') }}</h3>
              <div style="color: #409eff; font-size: 14px; margin-bottom: 8px;">{{ $t('home.team.member1.role') }}</div>
              <div style="color: #909399; font-size: 14px;">{{ $t('home.team.member1.desc') }}</div>
            </a-card>
          </a-col>

          <a-col :xs="24" :sm="12" :md="8">
            <a-card :body-style="{ padding: '24px', textAlign: 'center' }" style="border-radius: 8px; border: 1px solid #e4e7ed;">
              <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white;">
                
              </div>
              <h3 style="font-size: 18px; color: #2c3e50; margin-bottom: 8px;">{{ $t('home.team.member2.name') }}</h3>
              <div style="color: #409eff; font-size: 14px; margin-bottom: 8px;">{{ $t('home.team.member2.role') }}</div>
              <div style="color: #909399; font-size: 14px;">{{ $t('home.team.member2.desc') }}</div>
            </a-card>
          </a-col>

          <a-col :xs="24" :sm="12" :md="8">
            <a-card :body-style="{ padding: '24px', textAlign: 'center' }" style="border-radius: 8px; border: 1px solid #e4e7ed;">
              <div style="width: 80px; height: 80px; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: 50%; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; color: white;">
                
              </div>
              <h3 style="font-size: 18px; color: #2c3e50; margin-bottom: 8px;">{{ $t('home.team.member3.name') }}</h3>
              <div style="color: #409eff; font-size: 14px; margin-bottom: 8px;">{{ $t('home.team.member3.role') }}</div>
              <div style="color: #909399; font-size: 14px;">{{ $t('home.team.member3.desc') }}</div>
            </a-card>
          </a-col>
        </a-row>
      </a-card>
    </a-layout-content>

    <a-layout-footer style="text-align: center; background: #ffffff; color: #606266; border-top: 1px solid #e4e7ed;">
      <div style="padding: 16px 0;">
        <p style="margin: 0; font-size: 14px;">{{ $t('home.footer.copyright') }}</p>
        <p style="margin: 6px 0 0 0; opacity: 0.8; font-size: 12px;">{{ $t('home.footer.tech') }}</p>
      </div>
    </a-layout-footer>
  </a-layout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import config from '../config/env'
import NavBar from '../components/NavBar.vue'

const router = useRouter()
const statsLoading = ref(false)
const quickSearch = ref('')

const stats = ref({
  protein_count: 0,
  species_count: 0,
  pdb_file_count: 0,
  type_statistics: []
})

const fetchStats = async () => {
  statsLoading.value = true
  try {
    const response = await axios.get(`${config.API_BASE_URL}/stats/`)
    stats.value = response.data
  } catch (error) {
    console.error('获取统计信息失败:', error)
  } finally {
    statsLoading.value = false
  }
}

const goToSearch = () => {
  router.push({
    path: '/search',
    query: { q: quickSearch.value }
  })
}

onMounted(() => {
  fetchStats()
})
</script>

<style scoped>
:deep(.ant-card:hover) {
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

:deep(.ant-btn-primary) {
  background: #409eff;
  border-color: #409eff;
}

:deep(.ant-btn-primary:hover) {
  background: #66b1ff;
  border-color: #66b1ff;
}
</style>